<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>飞机大战</title>
	<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
	<script type="text/javascript" src="js/defy.js"></script>
	<script type="text/javascript" src="js/image.js"></script>
	<script type="text/javascript" src="js/event.js"></script>
	<script type="text/javascript" src="js/validator/formValidator-4.0.1.js"></script>
	<script type="text/javascript" src="js/validator/formValidatorRegex.js"></script>
	<link rel="shortcut icon" href="source/Icon-114.png" type="iamge/x-icon">
	<link rel="stylesheet" type="text/css" href="main.css">
	<link rel="stylesheet" type="text/css" href="js/validator/style/validator.css">
</head>
<body>
	<div id="tag">
		<div id="loadImage"></div>
		<div id="begin">
			<div id="logo"></div>
			<div id="name" >
				<form id="nameForm" >
					<table>
						<tr>
							<td class="juese">角色名：</td>
							<td><input type="text" name="userName" id="ct"></td>
							<td>
								<input type="button" value="创建" id="create">
							</td>
						</tr>
						<tr>
							<td></td>
							<td><div id="ctTip" ></div></td>
						</tr>
					</table>
				</form>
				</div>
			<div id="Btns">
				<input type="button" value="开始游戏" id="beginBtn" />
				<input type="button" value="道具图鉴" id="tipBtn"/>
			</div>
			<div id="tips" class="chooseHover tips"></div>
		</div>
		<div id="chooseFly">
			<div id="bgImage"></div>
			<div id="title"><img src="source/choose/title.png" alt=""></div>
			<div id="choose">
				<div id="blue" class="chooseFly"><img src="source/choose/choose_fly_blue.png"></div>
				<div id="pink" class="chooseFly"><img src="source/choose/choose_fly_pink.png"></div>
				<div id="red" class="chooseFly"><img src="source/choose/choose_fly_red.png"></div>
				<div id="yellow" class="chooseFly"><img src="source/choose/choose_fly_yellow.png"></div>
			</div>
			
		</div>
		<div id="end">
			<div id="over" class="endClass">
				<p class="userName"></p>
				<dl>
					<dt style="color:#9FBC48">基础得分：</dt>
					<dd>&nbsp;</dd>
				</dl>
				<dl>
					<dt style="color:#1B4C9F">关卡加成：</dt>
					<dd>&nbsp;</dd>
				</dl>
				<dl>
					<dt style="color:#D99B19">生命加成：</dt>
					<dd>&nbsp;</dd>
				</dl>
				<dl>
					<dt style="color:#E71916">最终得分：</dt>
					<dd>&nbsp;</dd>
				</dl>
				<p class="tip">&nbsp;</p>
			</div>
			<div id="rank" class="endClass dis">
				<table>
					<tr>
						<th>排名</th>
						<th>角色名</th>
						<th>灰机类型</th>
						<th>剩余生命</th>
						<th>关卡</th>
						<th>得分</th>
					</tr>
					<tr class="tr2">
						<td class="tdb position1"></td>
						<td class="name"></td>
						<td class="tdc"></td>
						<td class="rlife"></td>
						<td class="rlevel"></td>
						<td class="rscore"></td>
					</tr>
					<tr>
						<td class="tdb position2"></td>
						<td class="name"></td>
						<td class="tdc"></td>
						<td class="rlife"></td>
						<td class="rlevel"></td>
						<td class="rscore"></td>
					</tr>
					<tr>
						<td class="tdb position3"></td>
						<td class="name"></td>
						<td class="tdc"></td>
						<td class="rlife"></td>
						<td class="rlevel"></td>
						<td class="rscore"></td>
					</tr>
					<tr>
						<td class="rank45">4</td>
						<td class="name"></td>
						<td class="tdc"></td>
						<td class="rlife"></td>
						<td class="rlevel"></td>
						<td class="rscore"></td>
					</tr>
					<tr>
						<td class="rank45">5</td>
						<td class="name"></td>
						<td class="tdc"></td>
						<td class="rlife"></td>
						<td class="rlevel"></td>
						<td class="rscore"></td>
					</tr>
				</table>
			</div>
			<input type="button" value="再来一局" id="leftBtn" />
			<input type="button" value="查看排行" id="rightBtn"/>
		</div>
	<!-- 你要的音效来了 -->
	
	<audio id="bt"   autoplay></audio>
	<audio id="e1"   autoplay></audio>
	<audio id="e2"   autoplay></audio>
	<audio id="hero" autoplay></audio>
	<audio id="eat"  autoplay></audio>
	<audio id="bullet" loop autoplay></audio>
	<audio id="bgM"   autoplay></audio>

	<canvas id="canvas" width="512px" height="768px" border="1px solid #000">抱歉，您的浏览器不支持canvas动画</canvas>
	</div>

	<script>
		//定义宽高
		var width=512
		var height=768;
		//获取数据
		var canvas=$("#canvas").get(0);
		var ctx=canvas.getContext("2d");

	//[0]定义常量，参见defy.js

	//[1]创建图像对象，用来表天空、英雄、敌人
		//背景画布的创建参照image.js

		//loading动画,参见image.js
		//英雄图像数组,详情参照image.js

	//[2]为canvas添加事件
		//详情参见event.js
		

	//[3]数据对象 大写开头
		var Sky = {imge:bg,width:512,height:768,speed:20,x:0,y:0};
		var Start_bg = {imge:start_bg,width:512,height:768,x:0,y:0};
		var LevelGrand = {imge:dj,width:190,height:62,x:160,y:230};
		//关卡加载动画,speed控制轮换速度
		var LevelLoading =  {frames:ll,index:0,width:512,height:768,x:0,y:0,speed:loadingInterval,baseFrameCount:11};
		//飞机的加载动画，speed同上
		var HeroLoading = {frames:l,index:0,width:512,height:150,x:0,y:(height-150)/2,speed:2,baseFrameCount:3};
		//baseFrameCount可以进行爆破图片数量
		var Hero = {frames:h,width:116,height:120,index:0,speed:10,life:3,baseFrameCount:5};

		//speed是刷新速度及出子弹的速度，flyspeed是子弹飞行速度,life子弹的生命
		var Bullet1 = {frames:b,index:0,width:39,height:88,speed:10,flySpeed:10,life:1};
		var Bullet2 = {frames:b,index:1,width:57,height:57,speed:10,flySpeed:10,life:1};
		var Bullet3 = {frames:b,index:2,width:80,height:33,speed:10,flySpeed:10,life:2};
		var Bullet4 = {frames:b,index:3,width:80,height:180,speed:6,flySpeed:10,life:2};
		var Bullet5 = {frames:b,index:4,width:98,height:183,speed:6,flySpeed:10,life:3};
		var Bullet6 = {frames:b,index:5,width:98,height:237,speed:3,flySpeed:3,life:5};
		var bb = [Bullet1,Bullet2,Bullet3,Bullet4,Bullet5,Bullet6];

		//敌人飞机：大中小
		var Enemy1 = {frames:e,index:0,baseFrameCount:5,type:1,score:30,life:10,minSpeed:1,maxSpeed:1,width:130,height:98};

		var Enemy2 = {frames:e,index:5,baseFrameCount:2,type:2,score:20,life:5,minSpeed:1,maxSpeed:2,width:95,height:68};

		var Enemy3 = {frames:e,index:7,baseFrameCount:2,type:3,score:20,life:2,minSpeed:2,maxSpeed:3,width:51,height:37};

		var Enemy4 = {frames:e,index:9,baseFrameCount:2,type:4,score:10,life:1,minSpeed:2,maxSpeed:3,width:53,height:37};
		//你要的白云= =
		var Cloud1 = {frames:c,index:0,speed:0.5,width:512,height:282};
		var Cloud2 = {frames:c,index:1,speed:0.5,width:512,height:391};

		//加成道具,index和type共享,xv和yv是速度
		var Props1 = {frames:p,index:0,xv:-20,yv:10,width:40,height:40};
		var Props2 = {frames:p,index:1,xv:18,yv:8,width:40,height:40};
		var Props3 = {frames:p,index:2,xv:-15,yv:6,width:40,height:40};
		var Props4 = {frames:p,index:3,xv:13,yv:5,width:40,height:40};
		var Props5 = {frames:p,index:4,xv:-11,yv:5,width:40,height:40};

	//[4]业务对象

		//天空业务对象，config表示天空数据对象
		var SKY=function (config) {
			this.bg=config.imge;
			this.width = config.width;
			this.height =config.height;
			this.speed = 1000/config.speed;
			this.x1=0;
			this.y1=0;
			this.x2=0;
			this.y2=-this.height;
			this.lastTime=0;//上一次执行动作时间的毫秒数

			//负责移动背景的纵坐标
			this.step=function () {
				//判断是否到达天空移动的时间
				//获取当前时间的毫秒数
				var currentTime = new Date().getTime();
				if(currentTime-this.lastTime >= this.speed){
					this.y1++;
					this.y2++;
					this.lastTime = new Date().getTime();	
				};
				//判断y1,y2是否超出范围
				if(this.y1>=this.height){
					this.y1 = -this.height;
				};
				if(this.y2>=this.height){
					this.y2=-this.height;
				}
			};

			//绘制图像
			this.paint=function (ctx) {
				ctx.drawImage(this.bg,this.x1,this.y1);
				ctx.drawImage(this.bg,this.x2,this.y2);
			};
			//简单绘制图片
			this.simPaint = function (ctx) {
				ctx.drawImage(this.bg,config.x,config.y);
			}
		};

		//加载的业务对象
		var LOADING = function (config) {
			this.speed = 1000 / config.speed;
			this.lastTime = 0;
			this.frameIndex = 0;
			this.frame = null;//图像
			this.plain = config.index;
			//更换图片
			this.step = function () {
				var currentTime = new Date().getTime();
				if (currentTime - this.lastTime >= this.speed) {
					this.frame = config.frames[this.plain];
					this.frameIndex++;
					this.plain++;
					if(this.frameIndex >config.baseFrameCount ){
						//更新状态
						state ++;
						//如果等级1，开场音乐
						if(level == 1 && state == 2){
							changeMusic(false,'e1','audio/tank.mp3');
						}
					}
					this.lastTime = new Date().getTime();
				}
			};
			//绘制不同图片
			this.paint = function (ctx) {
				ctx.drawImage(this.frame,config.x,config.y);
			}

		};

		//英雄的业务对象
		var HERO = function (config) {
			this.x =(width - config.width)/2;
			this.y = height - config.height;
			this.width = config.width;
			this.height = config.height;
			this.speed = 1000/config.speed;
			this.frame = null;//当前图像
			this.frameIndex = config.index - 1;//图像索引
			this.lastTime = 0;
			this.shootInterval = 0 ;//绘制子弹间隔。通过子弹速度获得
			this.shootLastTime = 0;//上一次子弹射击时间
			this.down = false;//能否进行爆破
			this.downLastIime = 0;//上一次轮换爆破图片的时间
			this.baseFrameCount = config.baseFrameCount;//爆破图片数量
			this.downIndex = config.index + 3;//爆破开始索引
			this.canDelete = false;//能否被删除
			this.step = function () {
				var currentTime =new Date().getTime();
				if(!this.down){
				//正常状态
					if(currentTime - this.lastTime >= this.speed){
						if(this.frameIndex < (config.index+2)){
							this.frameIndex++;
						}else{
							this.frameIndex = config.index;
						};
						this.frame = config.frames[this.frameIndex];
						this.lastTime = new Date().getTime();
					};
					//计算飞机（根据鼠标）坐标
					if(plainX != 0 && plainY != 0){
						this.x = plainX - this.width/2;
						this.y = plainY - this.height/3;
					};
				}else{
					//进行爆破
					changeMusic(false,'hero','audio/eatBoom.mp3');
					//执行爆破轮换(downInterval为全局变量控制爆炸图像的轮换速度)
					if(currentTime - this.downLastIime >= heroDownInterval){
						if(this.baseFrameCount > 1){
							this.frame = config.frames[this.downIndex];
							this.downIndex++;
							this.baseFrameCount--;
							this.downLastIime = new Date().getTime();
						}else{
							this.frame = config.frames[config.index + 3 + 3];
							this.canDelete = true;
							if(life == 1){
								changeMusic(true,'hero','audio/gameOver.mp3');
							};
						};
						
						
					};
				};
			};
			this.paint = function (ctx) {
				ctx.drawImage(this.frame,this.x,this.y);
			};
			//为英雄添加发射子弹方法
			this.shoot = function () {
				this.shootInterval = 1000/bb[bi].speed;
				var currentTime = new Date().getTime();
				if(currentTime - this.shootLastTime >= this.shootInterval){
					//创建子弹对象,并将飞机位置计算并传给子弹
					var bullet = new BULLET(bb[bi]);
					bullet.x = plainX - bullet.width/2;
					bullet.y = plainY - (bullet.height*1.2);
					//将子弹加入到子弹数组中
					bullets[bullets.length] = bullet;
					//更新创建时间
					this.shootLastTime = new Date().getTime();
				};
			};
			//被击中事件
			this.duang= function () {
				this.down = true;//进行爆破
			}
		};

		//子弹业务对象
		var BULLET = function (config) {
			this.x = 0;
			this.y = 0;
			this.width = config.width;
			this.height = config.height;
			this.speed = 1000/config.speed;
			this.flySpeed = config.flySpeed;
			this.frameIndex = config.index;
			this.frame = config.frames[this.frameIndex];
			this.lastTime = 0;
			this.life = config.life;
			this.canDelete = false;//能否被移除
			this.move = function () {
				//纵坐标递减
				(this.y)-=this.flySpeed;
			};
			this.paint = function (ctx) {
				ctx.drawImage(this.frame,this.x,this.y);
			};
			//移除子弹
			this.outOfBounds = function () {
				if(this.y<(-config.height)){
					return true;
				}else{
					return false;
				}
			};
			this.duang = function () {
				this.life--;
				if(this.life == 0){
					this.canDelete = true;
				}	
			}
		};

		//敌机业务对象
		var ENEMY = function (config) {
			this.frame = config.frames[config.index];
			this.index = config.index;
			this.width = config.width;
			this.height = config.height;
			this.x = parseInt(Math.random()*(width-config.width));
			this.y = -config.height;
			this.type = config.type; 
			this.score = config.score;
			this.life = config.life;
			this.baseFrameCount = config.baseFrameCount;//表示爆破时这个飞机有多少图片可以轮换
			this.speed = 0;
			this.lastTime = 0;
			this.downLastIime = 0;
			this.down = false;//能否爆破
			this.canDelete = false;//能否被移除
			this.step = function () {
				//计算飞机speed
				if(this.type ==1){
					this.speed = parseInt(Math.random()*(config.maxSpeed-config.minSpeed)+config.minSpeed);
				}else{
					this.speed = config.minSpeed;
				};
				//计算飞机的坐标
				var currentTime = new Date().getTime();
				if(currentTime - this.lastTime >= this.speed){
					(this.y)+=this.speed; 
					this.lastTime = new Date().getTime();
				};
				//执行飞机的爆破
				if(this.down){
					//执行爆破轮换(downInterval为全局变量控制爆炸图像的轮换速度)
					if(currentTime - this.downLastIime >= downInterval){
						this.frame = config.frames[this.index];
						this.index++;
						this.baseFrameCount--;
						this.downLastIime = new Date().getTime();
					};
					if(this.baseFrameCount <0){
						this.canDelete = true;
						score+=this.score;
					};
				};
			};
			this.paint = function (ctx) {
				ctx.drawImage(this.frame,this.x,this.y);
			};
			//判断飞机是否出界
			this.outOfBounds = function () {
				if(this.y > height){
					return true;
				}else{
					return false;
				};
			};
			//敌机撞击事件
			this.hit = function (c) {
				var cx = c.x+c.width/2;
				var cy = c.y+c.height/2;
				var lx = this.x-c.width/2;
				var rx = this.x +this.width + c.width/2;
				var ty =  this.y - c.height/2;
				var by = this.y +this.height + c.height/2;
				if(cx>lx && cx<rx && cy>ty && cy<by){
					return true;
				}else{
					return false;
				}
			};
			//受伤事件
			this.duang = function () {
				this.life--;
				if(this.life==0){
					this.down = true;
					if(this.type == 1){
						changeMusic(true,'e1','audio/enemyDown1.mp3');
					};
				};
			};
			//产生道具
			this.produce = function () {
				//敌机类型为1和2时,随机产生道具,在销毁的时候调用
				if(this.type == 1) {
					var num = parseInt(Math.random()*10,10);
					if(num >= 6 && num <= 7){
						var prop = new PROPS(Props5);
						prop.x = this.x;
						prop.y = this.y;
						props[props.length] = prop;
					}else if(num > 2 && num < 6){
						var prop = new PROPS(Props4);
						prop.x = this.x;
						prop.y = this.y;
						props[props.length] = prop;
					}else if(num == 2){
						var prop = new PROPS(Props3);
						prop.x = this.x;
						prop.y = this.y;
						props[props.length] = prop;
					}else if(num == 1){
						var prop = new PROPS(Props2);
						prop.x = this.x;
						prop.y = this.y;
						props[props.length] = prop;
					}else if(num == 0 || num == 9){
						var prop = new PROPS(Props1);
						prop.x = this.x;
						prop.y = this.y;
						props[props.length] = prop;
					};
				};
			};
		};

		//云朵业务对象
		var CLOUD = function (config) {
			this.x = parseInt(Math.random()*512-256,10);
			this.y = -config.height;
			this.frame = config.frames[config.index];
			this.speed = config.speed;
			this.lastTime = 0;
			this.step = function () {
				var currentTime = new Date().getTime();
				if(currentTime - this.lastTime >= this.speed){
					(this.y)+=this.speed; 
					this.lastTime = new Date().getTime();
				};
			};
			this.outOfBounds = function () {
				if(this.y > height){
					return true;
				}else{
					return false;
				};
			};
			this.paint = function (ctx) {
				ctx.drawImage(this.frame,this.x,this.y);
			};
		};

		//加成道具业务对象
		var PROPS = function (config) {
			this.x = 50;
			this.y = 50;
			this.index = config.index;
			this.frame = config.frames[this.index];
			this.type = config.index + 1;
			this.width = config.width;
			this.height = config.height;
			this.xv = config.xv;
			this.yv = config.yv;
			this.lastTime = 0;
			this.canDelete = false;
			this.step = function () {
				//道具的坐标
				var currentTime = new Date().getTime();
				if(currentTime - this.lastTime >= propsInterval){
					(this.x)+=this.xv; 
					(this.y)+=this.yv; 
					if(this.x < 0 || this.x>462){
						(this.xv)*=-1;
					}
					this.lastTime = new Date().getTime();
				};
			};
			//与英雄的撞击事件
			this.hit = function (c) {
				var cx = c.x+c.width/2;
				var cy = c.y+c.height/2;
				var lx = this.x-c.width/2;
				var rx = this.x +this.width + c.width/2;
				var ty =  this.y - c.height/2;
				var by = this.y +this.height + c.height/2;
				if(cx>lx && cx<rx && cy>ty && cy<by){
					return true;
				}else{
					return false;
				}
			};
			//判断飞机是否出界
			this.outOfBounds = function () {
				if(this.y > height){
					return true;
				}else{
					return false;
				};
			};
			this.paint = function (ctx) {
				ctx.drawImage(this.frame,this.x,this.y);
			};
		}


	//[5]创建业务对象
		var sky = new SKY(Sky);
		var s_bg = new SKY(Start_bg);
		var levelGrand = new SKY(LevelGrand);
		var levelLoading = new LOADING(LevelLoading);
		var loading = new LOADING(HeroLoading);
		var hero = new HERO(Hero);
		//计时器对象
		var Do = null;

	//[6]创建全局方法

		//生产敌机函数(参数见defy.js--lastTime/interval)
		//生产云朵函数(参数见defy.js--cloudLastTime/cloundInterval)
		function componentEnter() {
		if(levelTime >=300){
			var currentTime = new Date().getTime();
			if(currentTime - lastTime >= interval){
				var num = parseInt(Math.random()*10,10);
				if(num>=0 && num<=3){
					enemys[enemys.length] = new ENEMY(Enemy4);
					lastTime = new Date().getTime();
				}else if(num>=4 && num<=7){
					enemys[enemys.length] = new ENEMY(Enemy3);
					lastTime = new Date().getTime();
				}else if(num==8){
					enemys[enemys.length] = new ENEMY(Enemy2);
					lastTime = new Date().getTime();
				}else if(num==9){
					if(enemys.length >0){
						if(enemys[0].type != 1){
						//创建大飞机并保存到第一个位置
						enemys.splice(0,0,new ENEMY(Enemy1));
						lastTime = new Date().getTime();
						//大飞机产生音效
						changeMusic(false,'e1','audio/enemyAppear.mp3');
						}
					}else{
						enemys[0] = new ENEMY(Enemy1);
						lastTime = new Date().getTime();
					}
				
				}
			};
			if( clouds.length<2 && currentTime - cloudLastTime >= cloudInterval){
				var cloudNum =  parseInt(Math.random()*2,10);
				if(cloudNum == 0){
					clouds[clouds.length] = new CLOUD(Cloud1);
					cloudLastTime =new Date().getTime();
				}else{
					clouds[clouds.length] = new CLOUD(Cloud2);
					cloudLastTime =new Date().getTime();
				}
			}
		}
		};

		//删除组件
		function deleteComEnter() {
			//在敌机被移除前创建道具
			for(var i =0; i<enemys.length;i++){
				if(enemys[i].canDelete){
					enemys[i].produce();
				};
			};
			//删除多出下边界和撞击完成的小飞机
			for(var i =0; i<enemys.length;i++){
				if(enemys[i].outOfBounds()||enemys[i].canDelete){
					enemys.splice(i,1);
				};
			};
			//移除出界和撞击子弹
			for(var j =0; j<bullets.length;j++){
				if(bullets[j].outOfBounds()||bullets[j].canDelete){
					bullets.splice(j,1);
				}
			};
			//移除云朵
			for(var i =0; i<clouds.length;i++){
				if(clouds[i].outOfBounds()){
					clouds.splice(i,1);
				};
			};
			//移除出界和撞击道具
			for(var j =0; j<props.length;j++){
				if(props[j].outOfBounds()||props[j].canDelete){
					props.splice(j,1);
				}
			};

			//判断飞机是否被重生
			if(hero.canDelete){
				//生命减少
				life--;
		 		if(life == 0){
					state = GAME_OVER;
				}else{
					//能够重生
					hero = new HERO(Hero);
					for(var i=0;i<enemys.length;i++){
						//全部执行爆破
						enemys[i].down = true;
					};
					bi = 0;
				};
			};
		};

		//判断敌人飞机是否发生碰撞
		function checkHit() {
			//遍历所有敌机
			for(var i=0;i<enemys.length;i++){
				var enemy = enemys[i];
				if(enemy.down||enemy.canDelete){
					//如果当前飞机已经报废进跳过
					continue;
				};
				//遍历所有子弹，并判断
				for(var j=0;j<bullets.length;j++){
					var bullet = bullets[j];
					if(enemy.hit(bullet) && !bullet.canDelete){
						//子弹碰撞
						bullet.duang();
						//敌机中弹函数
						enemy.duang();
					};
				};
				//判断与英雄是否相撞
				if(enemy.hit(hero) && !hero.down){
					//英雄执行撞击事件
					enemy.duang();
					hero.duang();
				};	
			};

			//遍历所有道具
			for(var i=0;i<props.length;i++){
				var prop = props[i];
				var type = prop.type;
				//判断道具是否和道具相撞，三种状态
				if(prop.hit(hero) && !prop.canDelete && !hero.down){
					switch(type){
						case 1:
						//子弹加强
						if(bi<bb.length-1){
							bi++;
						}
						changeMusic(false,"eat","audio/eatBullet.mp3");
						break;
						case 2:
						//加生命
						life++;
						changeMusic(false,"eat","audio/eatLife.mp3");
						break;
						case 3:
						//分数增加20%
						score=parseInt(score*1.2);
						changeMusic(false,"eat","audio/eat20.mp3");
						break;
						case 4:
						//分数增加
						score+=300;
						changeMusic(false,"eat","audio/eat300.mp3");
						break;
						case 5:
						changeMusic(false,"eat","audio/eatLife.mp3");
						//清屏
						for(var i=0;i<enemys.length;i++){
						enemys[i].down = true;};
						break;
					}
					prop.canDelete = true;
				}
			}
		};

		/**///组件移动的计算
		var stepComponent = function () {
			//移动天空
			sky.step();
			//如果英雄不处于爆破状态，添加子弹，英雄移动
			hero.step();
			if(!hero.down){
				hero.shoot();
			}
			//移动子弹
			for(var i=0;i<bullets.length;i++){
				bullets[i].move();
			};
			//添加敌机和云朵
			componentEnter();
			//移动敌机(循环)
			for(var i=0;i<enemys.length;i++){
				enemys[i].step();
			};
			//移动云朵
			for(var i=0;i<clouds.length;i++){
				clouds[i].step();
			};
			//移动道具
			for(var i=0;i<props.length;i++){
				props[i].step();
			}
		};

		/**///绘制组件
		var paintComponent = function () {
			//绘制天空
			sky.paint(ctx);
			//绘制云朵
			for(var i=0;i<clouds.length;i++){
				clouds[i].paint(ctx);
			};
			//绘制子弹
			for(var i=0;i<bullets.length;i++){
				bullets[i].paint(ctx);
			};
			//绘制敌机
			for(var i=0;i<enemys.length;i++){
				enemys[i].paint(ctx);
			};
			//绘制英雄
			hero.paint(ctx);
			//绘制道具
			for(var i=0;i<props.length;i++){
				props[i].paint(ctx);
			};
			//绘制分数和剩余生命
			ctx.drawImage(las,0,0);
			ctx.font="30px 黑体";
			ctx.fillStyle = "#fff";
			ctx.fillText(life,85,38);
			ctx.fillText(score,width-95,42);
		};

		//如果等级发生变化就执行背景图片更换
		var levelChange = function () {
			level++;
			if(level == 6){
				level = 5;
				state = GAME_OVER;
			}else{
				bg.src = "source/bg/img_bg_level_"+level+".jpg";
				dj.src = "source/level/level"+level+".png";
				levelGrand = new SKY(LevelGrand);
			 	levelLoading = new LOADING(LevelLoading);
			}
		};

		//**过关动画**
		var levelUp = function () {
			//0.暂停声音
			pauseMusic();
			//1.绘制所有东西
				//绘制天空
				sky.step();
				sky.paint(ctx);
				//绘制云朵
				for(var i=0;i<clouds.length;i++){
					clouds[i].paint(ctx);
				};
				//绘制敌机
				for(var i=0;i<enemys.length;i++){
					enemys[i].paint(ctx);
				};
				//绘制分数和剩余生命
				ctx.drawImage(las,0,0);
				ctx.font="30px 黑体";
				ctx.fillStyle = "#fff";
				ctx.fillText(life,85,38);
				ctx.fillText(score,width-95,42);

			//2.英雄飞机飞走（执行完动画返回true）
				hero.step();
				ctx.drawImage(hero.frame,x,y);
				y-=3;
			//3.过关音效
				changeMusic(true,'bt','audio/victory.mp3');
			//4.显示过关
				//一个图片绘制
				if(level < 5){
					ctx.drawImage(levelU,0,0);
				};
			//5.重置关卡计时器
				if(y < -100){
					state = STARTING;
					levelChange();
				};
		};

		//SARTING中重置数据函数
		function reLoad() {
			//清空敌机数组和子弹
			enemys = [];
			bullets = [];
			//重置关卡计时器
			levelTime = 6000;
			//重置敌机生产间隔
			interval = 200;
			//重置飞机位置
			y = 700;
		}

		//执行和暂停音效函数
		function playMusic() {
			//播放背景音乐
			if($("#e1").get(0).ended){
				changeMusic(true,'bgM','audio/bg.mp3');
			};
			//如果背景音乐暂停则继续
			if($("#bgM").get(0).paused){
				$("#bgM").get(0).play();
			};
			//暂停子弹
			if( hero.down ){
				$("#bullet").get(0).pause();
			};
			//如果继续子弹发射
			if($("#bullet").get(0).paused && !hero.down ){
				$("#bullet").get(0).play();
			};
			//改变子弹声音
			changeMusic(true,'bullet','audio/b'+bm+'.mp3');
			if(bm!=bi){
				changeMusic(true,'bullet','audio/b'+bi+'.mp3');
				bm = bi;
			}
		}
		function pauseMusic() {
			//暂停背景音乐
			$("#bgM").get(0).pause();
			$("#bullet").get(0).pause();
		};

		//难度控制
		function difficult() {
			level
			//实际是修改生产敌机间隔interval,参数difficulty
			if(interval > 200-level*15){
				interval-=level*0.0025;
			}
		}

	//[7]定义计时器函数
		function animat() {
			switch(state){
				case CHOOSE:
					//用div绘制飞机
					break;
				case START:
					//绘制背景
					s_bg.simPaint(ctx);
					//绘制logo
					ctx.drawImage(logo,60,100);
					//飞机加载
					loading.step();
					loading.paint(ctx);
					break;
				case STARTING:
					//重置数据
					reLoad();
					//绘制背景
					levelLoading.step();
					levelLoading.paint(ctx);
					levelGrand.simPaint(ctx);
					break;
				case RUNNING:
					//增加难度
					difficult();
					//播放音乐
					playMusic();
					//所有移动
					stepComponent();
					//判断碰撞
					checkHit();
					//移除出界物体
					deleteComEnter();
					//绘制
					paintComponent();
					//关卡时间数减少,时间为零过关
					levelTime--;
					if(levelTime <= 0 && !hero.down){
						state = LEVELUP;						
					}
					//检测输出
					break;
				case LEVELUP:
					//关卡升级的时候
					levelUp();
					break;
				case PAUSE:
					//暂停音乐
					pauseMusic();
					//暂停：绘制但不移动
					sky.step();
					paintComponent();
					//暂停图片
					ctx.drawImage(pauseI,0,0);
					break;
				case GAME_OVER:
					//暂停音乐
					pauseMusic();
					//游戏结束：类似于暂停
					//停止计时器
					clearInterval(Do);
					sky.step();
					$("#end").css({"display":"block"});
					//更新本地分数
					localScore();
					//提交分数函数
					subScore();
					break;
			}			
		};
	
	</script>
</body>
</html>